﻿

<style type="text/css">
    .cssName { text-align: right; font-weight:bold; }
    input { border:1px #eee inset;}
</style>

<script>

_run( function() {

    $('#border-style').val( '#{v.border-style}' );
    $('#background-repeat').val( '#{v.background-repeat}' );
    $('#background-position').val( '#{v.background-position}' );
    $('#font-family').val( '#{v.font-family}' );
    $('#font-style').val( '#{v.font-style}' );
    $('#font-weight').val( '#{v.font-weight}' );
    $('#text-align').val( '#{v.text-align}' );
    $('#text-decoration').val( '#{v.text-decoration}' );


    if( 'none'=='#{v.display}' ) {
        $('#displayHide').click();
    }
    else {
        $('#display').click();
    }
    
    $('.colorInput').each( function() {
        if( $(this).val() == '' ) {
            $(this).val('#');
        }
    });
    
    $('.pxInput').each( function() {
        if( $(this).val() == '' ) {
            $(this).after('<span class="note">px</span>');
        }
        else {
            var intValue = wojilu.str.trimEnd( $(this).val(), 'px' );
            $(this).val( intValue );
            $(this).after('<span class="note">px</span>');
        }
    });



});

</script>


<table style="width:100%" cellpadding="3" cellspacing="0">
    <tr>
            <td class="cssName">是否显示</td><td><input type="radio" name="display" value="" id="display" />显示 <input type="radio" name="display" value="none" id="displayHide" />隐藏 </td></tr>

<tr><td colspan="2" style="height:0px;"></td></tr>

<tr>
    <td style="width:80px;" class="cssName">大小</td>
    <td>宽度<input name="width" type="text" style="width:40px;" value="#{v.width}" /><span class="note">%或px</span>&nbsp; 
    高度<input class="pxInput"  name="height" type="text" style="width:40px;" value="#{v.height}" /></td></tr>
    
    
            <tr><td class="cssName">边框</td><td>粗细<input class="pxInput"  name="border-width" type="text" style="width:40px;" value="#{v.border-width}" />&nbsp;&nbsp;<select name="border-style" id="border-style"><option value="" selected>默认</option><option value="solid" >实线/solid</option><option value="dashed" >虚线/dashed</option><option value="dotted" >点状/dotted</option><option value="double" >双线/double</option><option value="groove" >槽状/groove</option><option value="ridge" >脊状/ridge</option><option value="inset" >凹陷/inset</option><option value="outset" >凸出/outset</option><option value="none" >无边框/none</option></select>&nbsp; 
                颜色<input class="colorInput" name="border-color" type="text" style="width:80px;" value="#{v.border-color}" /></td></tr>


    <tr><td class="cssName">背景色</td><td><input  class="colorInput" name="background-color" type="text" style="width:80px;" value="#{v.background-color}" />&nbsp;&nbsp;&nbsp; </td></tr>


    <tr><td class="cssName">背景图片</td><td><input name="background-image" type="text" style="width:200px;" value="#{v.background-image-value}" /><select name="background-repeat" id="background-repeat">
    <option value="" selected>默认</option>
    <option value="repeat" >平铺</option>
    <option value="no-repeat" >不平铺</option>
    <option value="repeat-x" >横向平铺</option>
    <option value="repeat-y" >纵向平铺</option>
    </select><select name="background-position" id="background-position"><option value="" selected>默认</option><option value="top left" >上部左侧</option>
    <option value="top center" >上部中间</option>
    <option value="top right" >上部右侧</option>
    <option value="center left" >中间左侧</option>
    <option value="center center" >正中间</option>
    <option value="center right" >中间右侧</option>
    <option value="bottom left" >底部左侧</option>
    <option value="bottom center" >底部中间</option>
    <option value="bottom right" >底部右侧</option></select></td></tr>
        
<tr><td colspan="2" style="height:0px;"></td></tr>
    

    
    <tr>
    <td class="cssName">文字</td><td>大小<input class="pxInput"  name="font-size" type="text" style="width:40px;" value="#{v.font-size}" />&nbsp;&nbsp; 
        字体<select name="font-family" id="font-family"><option value="" selected>默认</option><option value="宋体" >宋体</option><option value="楷体_GB2312" >楷体</option><option value="黑体" >黑体</option><option value="微软雅黑" >微软雅黑</option><option value="隶书" >隶书</option><option value="仿宋_GB2312" >仿宋</option><option value="arial, helvetica, sans-serif" >Arial</option><option value="Arial Black" >Arial Black</option><option value="Verdana, Arial, Helvetica, sans-serif" >Verdana</option><option value="courier new, courier, mono" >Courier New</option><option value="times new roman, times, serif" >Times New Roman</option></select>&nbsp; <select name="font-style" id="font-style">
        <option value="" selected>默认</option>
        <option value="italic">斜体</option>
        <option value="normal">无样式</option>
    </select>&nbsp;&nbsp;<select name="font-weight" id="font-weight">
        <option value="" selected>默认</option>
        <option value="bold">粗体</option>
        <option value="normal">不加粗</option>
    </select>
        <br />对齐
        <select name="text-align" id="text-align">
            <option value="" selected>默认</option>
            <option value="left" >左对齐</option>
            <option value="center" >中间对齐</option>
            <option value="right" >右对齐</option>
            </select>&nbsp; &nbsp; 
            装饰
            <select name="text-decoration" id="text-decoration">
            <option value="" selected>默认</option>
            <option value="underline" >下划线</option>
            <option value="line-through" >删除线</option>
            <option value="overline" >上划线</option>
            <option value="blink" >闪烁</option>
            <option value="none" >无修饰</option>
            </select></td></tr>
        
<tr><td colspan="2" style="height:0px;"></td></tr>        
        
        <tr><td class="cssName">外边距</td><td>
        
        <table cellpadding="0">
            <tr>
                <td style="width:80px;">左<input class="pxInput" name="margin-left" type="text" style="width:40px;" value="#{v.margin-left}" /></td>
                <td style="width:80px;">上<input class="pxInput"  name="margin-top" type="text" style="width:40px;" value="#{v.margin-top}" /></td>
                <td style="width:80px;">右<input class="pxInput"  name="margin-right" type="text" style="width:40px;" value="#{v.margin-right}" /></td>
                <td style="width:80px;">下<input class="pxInput"  name="margin-bottom" type="text" style="width:40px;" value="#{v.margin-bottom}" /></td>
            </tr>
        </table>
        

            </td></tr><tr>
        <td class="cssName">内边距</td><td>
        
        <table cellpadding="0">
            <tr>
                <td style="width:80px;">左<input class="pxInput"  name="padding-left" type="text" style="width:40px;" value="#{v.padding-left}" /></td>
                <td style="width:80px;">上<input class="pxInput"  name="padding-top" type="text" style="width:40px;" value="#{v.padding-top}" /></td>
                <td style="width:80px;">右<input class="pxInput"  name="padding-right" type="text" style="width:40px;" value="#{v.padding-right}" /></td>
                <td style="width:80px;">下<input class="pxInput"  name="padding-bottom" type="text" style="width:40px;" value="#{v.padding-bottom}" /></td>
            </tr>
        </table>
        

    </td></tr>
            
            <tr>
    <td class="cssName">&nbsp;</td><td><input type="submit" value="_{submit}" class="btn" />&nbsp;<input type="button" value="_{cancel}" class="btnCancel" /></td></tr></table>

